<template>
<view class="m_l_48 m_r_48 course_list">
  <view class="course_item p-r dis-flex" v-for="(item, index) in selectList" :key="index" @tap="toTeacherDetail(index)">
    <image lazy-load :class="['teacher_img', listType != 0 ? 'border' : '']" :src="item.headeravatar" mode="aspectFill"></image>
    <image class="teacher_grade p-a" v-if="item.grade!=0" :src="item.grade==1?imgPrefix('/static/image/teacher/grade1.png'):item.grade2?imgPrefix('/static/image/teacher/grade2.png'):imgPrefix('/static/image/teacher/grade3.png')"></image>
    <view class="flex-box">
      <view class="course_name f_36 f_5 onelist-hidden dis-flex flex-y-center navy_blue" :class="listType!=3?'width486':'flex-x-between'">
        <view class="onelist-hidden" :class="listType==3?'width285':''">{{ item.title }}</view>
        <view :style="{backgroundColor:item.color}" :class="['language_type_text','f_5',item.color?'c-f':'lan_' + item.lanClass]">{{ item.language }}</view>
        <image v-if="listType == 3" class="img_url" @click.stop="toTeacherDetail(index, true)" :src="imgPrefix('/static/image/icon/teacher_card_close.png')"></image>
      </view>
      <view class="course_info f_24">
        <text class="f_24">教龄{{ item.year }}年 · 已授{{ item.course_count }}课<block v-if="lat!=''"> · 距离：</block></text>
        <text class="location_text" @tap.stop="getLocationDetail(item.latitude, item.longitude, index)">
          {{getAddress(item.latitude, item.longitude)}}
        </text>
      </view>
      <view class="score dis-flex flex-y-end f_24 gery1">
        <text>评分：</text>
        <image class="image" :src="imgPrefix('/static/image/icon/comment_status_1.png')" v-for="score_index of item.score" :key="score_index"></image>
      </view>
      <view :class="['dis-flex',item.lable.length>0?'flex-x-between':'flex-x-end']">
        <view v-if="item.lable.length>0" class="teacher_info">
          <text v-if="indey < 2" v-for="(itemy, indey) in item.lable" :key="indey" class="language_type_text lan_text_default teacher_lable">{{ itemy.tag_name }}</text>
        </view>
        <view class="course_price_info">
          <text class="course_price font_bebas f_36">￥{{ item.price }}</text>
          <text class="f_24">/{{item.hour>1?item.hour:''}}小时</text>
        </view>
      </view>

    </view>
  </view>
</view>
</template>

<script>
import {
  getDistance
} from '@/static/uitls/common.js';
const app = getApp();
export default {
  props: {
    selectList: {
      type: Array,
      default: []
    },
    lat: {
      type: [Number, String],
      default: 0
    },
    lon: {
      type: [Number, String],
      default: 0
    },
    listType: {
      // 这个参数是处理列表的样式细微差距 0 首页列表  1 搜索列表页面 3 教师名片
      type: [Number, String],
      default: 0
    }
  },
  data() {
    return {
      isChange: false,
      distanceArr: []
    };
  },
  methods: {
    getAddress(a = 0, b = 0) {
      let {
        lat,
        lon
      } = this;
      app._log(lat, lon, a, b)
      if (a == 0 || b == 0 || Number(lat) == 0) return '';
      return getDistance(lat, lon, a, b, 1, 'str');
    },
    toTeacherDetail(index, state) {
      // app._log(index);
      if (this.listType != 3 || state) {
        this.$emit('bind-index', index);
      } else {
        this.$emit('bind-view', index);
      }
    },
    // 点击教师距离信息 跳转
    getLocationDetail(lat, lon, index) {
      // app._log(lat, lon);
      if (lat != null && lon != null) {
        uni.openLocation({
          latitude: Number(lat),
          longitude: Number(lon),
          success: function () {
            app._log('success');
          },
          fail: err => {
            app._log(err);
            this.toTeacherDetail(index);
          }
        });
      } else {
        this.toTeacherDetail(index);
      }
    }
  }
};
</script>

<style lang="scss">
.score {
  margin-top: 12rpx;

  .image {
    width: 32rpx;
    height: 32rpx;
  }
}

.course_list {
  padding-bottom: 18rpx;
}

.course_item {
  width: 654rpx;
  background-color: #ffffff;
  box-shadow: 0rpx 0rpx 32rpx 0rpx #f7f5f5;
  border-radius: 32rpx;
  border: solid 1rpx rgba(234, 234, 237, 0.8);
  padding: 24rpx 24rpx 20rpx;
  margin-bottom: 24rpx;
}

.width486 {
  max-width: 486rpx;
}

.width285 {
  max-width: 285rpx;
}

.course_name {
  line-height: 50rpx;

  .location_text {
    font-size: 24rpx;
    color: rgba(37, 39, 72, 0.6);
    padding-left: 10rpx;
  }

  .onelist-hidden {
    margin-right: 16rpx;
  }
}

.course_info {
  padding-top: 10rpx;
  color: rgba(37, 39, 72, 0.7);
}

.select_language_name {
  color: #7380ff;
  background-color: rgba(115, 128, 255, 0.1);
}

// .teacher_year {
// 	color: #9279d0;
// 	background-color: rgba(202, 189, 232, 0.2);
// }
.teacher_lable {
  color: rgba(37, 39, 72, 0.8) !important;
}

// .course_bottom {
// 	margin-top: 24rpx;
// 	display: flex;
// 	justify-content: space-between;
// }

.teacher_info {
  display: inline-flex;
  align-items: center;
  padding-top: 12rpx;

  .language_type_text {
    margin-right: 10rpx;
  }
}

.teacher_img {
  width: 96rpx;
  height: 96rpx;
  margin-right: 24rpx;
  border-radius: 32rpx;
  flex-shrink: 0;
}

.teacher_grade {
  left: 75rpx;
  top: 75rpx;
  width: 48rpx;
  height: 48rpx;
  border: 2rpx solid #fff;
  border-radius: 50%;
}

.teacher_name {
  font-size: 26rpx;
  color: #252748;
  max-width: 290rpx;
}

.course_price_info {
  color: #ff6f03;
  margin-top: 12rpx;
  display: flex;
  align-items: center;

  .course_price {
    margin-right: 4rpx;
  }
}

.img_url {
  width: 40rpx;
  height: 40rpx;
}
</style>
